<template>

    <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <DataGroup title="访问量" :num="5869">
                <div slot="header-desc">
                    <el-tag type="success">日</el-tag>
                </div>
                <div slot="content-desc" class="content_body_wrap">
                    日同比 12.5% <i class="el-icon-caret-top" style="color: #ed4014;"></i>
                    周同比 5% <i class="el-icon-caret-bottom" style="color: #19be6b;"></i>
                </div>
                <div slot="footer-desc">总访问量</div>
                <div slot="footer-num">528 万</div>
            </DataGroup>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <DataGroup title="销售额" :num="6689" prefixUnit="￥">
                <div slot="header-desc">
                    <el-tag type="primary">月</el-tag>
                </div>
                <div slot="content-desc" class="content_body_wrap">
                    <el-progress class="progress" :stroke-width="15" :show-text="false" :percentage="50"></el-progress>
                </div>

                <div slot="footer-desc">总销售额</div>
                <div slot="footer-num">68 万</div>
            </DataGroup>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <DataGroup title="订单量" :num="45689">
                <div slot="header-desc">
                    <el-tag type="danger">周</el-tag>
                </div>
                <div slot="content-desc">
                    <div ref="orderChart" class="orderChart"></div>
                </div>
                <div slot="footer-desc">转化率</div>
                <div slot="footer-num">60 %</div>
            </DataGroup>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <DataGroup title="新增用户" :num="8485" suffixUnit="位">
                <div slot="header-desc">
                    <i class="el-icon-user"></i>
                </div>
                <div slot="content-desc" class="content_body_wrap">
                    <div class="avatar_wrap">
                        <div class="item" :style="`margin-left:${index>0?-8:0}px`" v-for="(item, index) of 10" :key="index">
                            <el-avatar size="small" src="https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar"></el-avatar>
                        </div>
                    </div>
                </div>
                <div slot="footer-desc">总用户</div>
                <div slot="footer-num">10800 人</div>
            </DataGroup>
        </el-col>
    </el-row>

</template>

<script>

import { mapGetters } from 'vuex'
import DataGroup from '../ui/DataGroup'
export default {
    name: 'PanelGroup',
    components: {
        DataGroup
    },
    data() {
        return {

        }
    },
    computed: {
        ...mapGetters(['user'])
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.echarts = this.$echarts.init(this.$refs.orderChart, 'macarons')
            this.initChart()
            window.onresize = () => {
                this.echarts.resize()
            }
        })
    },

    methods: {
        initChart() {
            this.echarts.setOption({

                    grid: {
                        top: '10px',
                        left: '0px',
                        right: '0px',
                        bottom: '10px'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        show: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value',
                        show: false
                    },
                    series: [{
                        data: [444, 666, 777, 777, 444, 999, 322],
                        type: 'line',
                        areaStyle: {
                            opacity: 0.3
                        },
                        smooth: true
                    }]
            });
        }

    }

}
</script>

<style lang="scss" scoped>
.orderChart{
    height: 50px;
}
.content_body_wrap{
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;

    .progress{
        width: 100%;
    }

    .avatar_wrap{
        display: flex;
        align-items: center;
    }
}

</style>
